<template>
	<view class="container" :style="{paddingTop: statusBarHeight + 'px', background: 'linear-gradient(to bottom, #FFF 0%, #FFF '+ (statusBarHeight + 44)+'px ,#F8F8F8  '+ (statusBarHeight + 45)+'px ,  #F8F8F8 100%)'}">
		<uni-nav-bar title="门店数据" :border="false" left-icon="left"  background-color="#fff" fixed color="#000" class="nav_bar" @clickLeft="back" ></uni-nav-bar>
		
		<view class="tabs"  style="border-bottom: 1px solid #EEEEEE;">
			<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#FA2C1E" @clickItem="onClickItem"/>
		</view>
		<view class="data apply_data" v-if="current==0">
			<view class="data_title">
				<view class="item"> 申请人 </view>
				<view class="item"> 手机号 </view>
				<view class="item"> 申请级别</view>
				<view class="item"> 申请时间 </view>
				<view class="item"> 操作 </view>
			</view>
			<view class="empty" v-if="tableData.length<=0">
				暂无申请记录
			</view>
			<view class="data_content" v-else v-for="(item, index) in tableData" :key="index">
				<view class="item"> {{item.name}} </view>
				<view class="item"> {{item.mobile}} </view>
				<view class="item"> {{item.apply_type_name}} </view>
				<view class="item"> {{item.createtime}} </view>
				<view class="item options"> 
					<button class="mini-btn" type="warn" size="mini" @click="showModal(false,item.id)">驳回</button>
					<button class="mini-btn" type="warn" size="mini" style="background-color: #09BB07;margin-left: 10rpx;" @click="showModal(true,item.id)">同意</button>
				</view>
			</view>
		</view>
		
		<view class="member_content" v-if="current==1">
			<view v-if="!showDetail">
				<uni-segmented-control :current="current1" :values="items1" style-type="text" active-color="#FA2C1E" @clickItem="onClickItem1"/>
				<view class="member">
					<view class="item ">
						<view class="title">
							销售额
						</view>
						<view class="number">
							￥{{sales}}
						</view>
					</view>
					<view class="item ">
						<view class="title">
							总团队人数
						</view>
						<view class="number">
							{{totalCount}}
						</view>
					</view>
				</view>
				<view class="data">
					<view class="data_title">
						<view class="item"> 角色 </view>
						<view class="item"> 人数 </view>
						<view class="item"> 销售总额 </view>
						<view class="item"> 可用余额 </view>
					</view>
					<view class="empty" v-if="listData.length<=0">
						暂无会员数据
					</view>
					<view class="data_content" v-else v-for="(item, index) in listData" :key="index">
						<view class="item type" @click="toDetail(item.apply_type)"> {{item.apply_type_name}} </view>
						<view class="item"> {{item.persons_count}} </view>
						<view class="item"> ￥{{item.sales}} </view>
						<view class="item"> ￥{{item.money}} </view>
					</view>
				</view>
			</view>
			
			<view class="data detail_data" v-else>
				<view class="data_title">
					<!-- {{applyTypeMap[apply_type]}} -->
					<view class="item type_name">
						<uni-data-select v-model="apply_type" :localdata="applyTypeList" @change="change" :clear="false" :border="false" style="background-color: #fff;"></uni-data-select>
					</view>
					
					<view class="item"> 贡献业绩 </view>
					<view class="item"> 可用总额 </view>
					<view class="item"> 轻医美 </view>
					<view class="item"> 康养卡 </view>
				</view>
				<view class="empty" v-if="detailListData.length<=0">
					暂无会员数据
				</view>
				<view class="data_content" v-else v-for="(item, index) in detailListData" :key="index">
					<view class="item type type_name"> {{item.name}} </view>
					<view class="item"> {{item.sales}} </view>
					<view class="item"> {{item.money}} </view>
					<view class="item"> 0 </view>
					<view class="item"> 0 </view>
				</view>
			</view>
		</view>
		
	
	</view>
</template>

<script>
import {getCooperationApplyList,saveAgreeRefuseApply,getStoreMemberSaleList,getStoreMemberSaleListDetail} from '../../../api/api.js'
const shop_id = uni.getStorageSync('shop_id')
	export default {
		data() {
			return {
				statusBarHeight:'',
				items: ['申请记录', '会员信息'],
				items1: ['线上5G小店', '线下5G科技康美馆'],
				current: 0,
				current1: 1,
				tableData:[],
				listData:[],
				detailListData:[],
				sales:0,
				totalCount:0,
				shop_id,
				showDetail:false,
				apply_type:'',
				applyTypeList:{}
			};
		},
		onLoad(){
			this.GetStatusBarHeight();
			this.getCooperationApplyList()
			this.getStoreMemberSaleList()
		},
		methods:{
			//获取状态栏的高度
			GetStatusBarHeight() {
			    let that = this;
			       wx.getSystemInfo({
			        success: function (res) {
			            that.statusBarHeight = res.statusBarHeight;
			        },
			    });
			},
			back(){
				if(this.showDetail){
					this.showDetail = false
				}else {
					uni.navigateBack()
				}
			},
			onClickItem(e){
				this.showDetail = false
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			onClickItem1(e){
				if(e.currentIndex == 0){
					uni.showToast({
						icon:'none',
						title: '开发中',
						duration: 2000
					})
				}else {
					if (this.current1 != e.currentIndex) {
						this.current1 = e.currentIndex;
					}
				}
			},
			getStoreMemberSaleList(){
				const shop_id = uni.getStorageSync('shop_id')
				getStoreMemberSaleList({shop_id}).then(res=>{
					this.listData = res.data.data.list
					this.applyTypeList = res.data.data.list.map(e=>{
						return {value:e.apply_type,text:e.apply_type_name}
					})
					this.sales= Number(res.data.data.all_sales_count).toFixed(2)
					this.totalCount=res.data.data.all_persons_count
				})
			},
			getCooperationApplyList(){
				const shop_id = uni.getStorageSync('shop_id')
				getCooperationApplyList({shop_id}).then(res=>{
					this.tableData = res.data.data
				})
			},
			showModal(flag,id){
				if(flag){
					uni.showModal({
						title: '同意申请人的级别申请',
						success: (res)=> {
							if (res.confirm) {
								saveAgreeRefuseApply({
									apply_id:id,
									is_agree:1
								}).then(()=>{
									this.getCooperationApplyList()
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else{
					uni.showModal({
						title: '驳回申请人的级别申请',
						editable:true,
						placeholderText:'请输入驳回原因',
						success:  (res)=> {
							if (res.confirm) {
								if(!res.content){
									uni.showToast({
										icon:'none',
										title: '驳回原因不能为空'
									});
								}else{
									saveAgreeRefuseApply({
										apply_id:id,
										is_agree:2,
										refuse_reason:res.content
									}).then(()=>{
										this.getCooperationApplyList();
									})
								}
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			toDetail(apply_type){
				this.apply_type = apply_type
				getStoreMemberSaleListDetail({apply_type,shop_id:this.shop_id}).then(res=>{
					this.showDetail = true
					this.detailListData = res.data.data
				})
			},
			change(e){
				this.toDetail(e)
			}
		}
	}
</script>

<style lang="scss">
.container {
	background: #F8F8F8;
	min-height: 100vh;
}
/deep/ .uniui-left::before{
	font-size: 46rpx;
}
/deep/ .uni-nav-bar-text{
	font-size: 34rpx;
	font-family: PingFangSC-Medium, PingFang SC;
}
/deep/ .segmented-control {
	background-color: #fff;
}
.tabs {
	background: #FFFFFF;
	// height: 110rpx;
	.segmented-control{
		height: 102rpx !important;
	}
	/deep/.segmented-control__item--text{
		padding: 28rpx 0 !important;
	}
}
.data {
	margin-top: 20rpx;
	padding-bottom: 100rpx;
	background-color: #fff;
	font-size: 28rpx;
	padding: 0 10rpx;
	.data_title {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 700;
		color: #222222;
		border-bottom: 2rpx solid #E7E7E7;
		.item {
			width: 25%;
			text-align: center;
			padding: 20rpx 0;
		}
	}
	.data_content {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		border-bottom: 2rpx solid #E7E7E7;
		.item {
			width: 25%;
			text-align: center;
			padding: 20rpx 0;
		}
		.type {
			color: #FA2C1E;
		}
	}
	.empty {
		min-height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #666666;
	}
}
.apply_data {
	.data_title {
		.item {
			width: 33.33%;
		}
	}
	.data_content {
		.item {
			width: 33.33%;
		}
		.options {
			.mini-btn {
				width: 45%;
				padding-right: 0;
				padding-left: 0;
			}
		}
	}
}
.detail_data {
	.data_title {
		.item {
			width: 19%;
		}
		.type_name {
			width: 24%;
		}
	}
	.data_content {
		.item {
			width: 19%;
		}
		.type_name {
			width: 24%;
		}
	}
}

.member {
	padding: 26rpx 24rpx 34rpx;
	width: 100vw;
	height: calc(100vw * 0.3445);
	border-radius: 6px;
	background-image: url(../../../static/bg_member.png);
	background-size: 100% 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	color: #FFFFFF;
	.item {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.title {
			font-family: PingFangSC-Regular, PingFang SC;
			font-size: 24rpx;
			line-height: 34rpx;
		}
		.number {
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			line-height: 50rpx;
			margin-top: 6rpx;
		}
	}
}
/deep/ .uni-select {
	padding: 0 !important;
	border: none !important;
}
/deep/ .uni-select__selector-item {
	padding: 0 !important;
}
</style>
